<template>
    <view>
        <map class="map" 
             :latitude="latitude" 
             :longitude="longitude" 
             :markers="markers" 
             show-compass 
             enable-building
             @tap="getLocation">
        </map>
        <input type="text" v-model="address" class="info-box">

        <view class="confirm-view" @tap="confirm">
            <text class="confirm-view-text">确定</text>
        </view>
    </view>
</template>


<script>
    import { reactive, ref,getCurrentInstance } from "vue";
    export default {
        setup(){
            const longitude = ref(104.06583864822596)
            const latitude = ref(30.658802521527736)
            const polyline = reactive([])
            const markers = reactive([{
                id: 1,
                longitude: 104.06583864822596,
                latitude: 30.658802521527736,
				width: 30,     // 必须设置！单位：px
				height: 30,    // 必须设置！单位：px
            }])
            const address = ref("")

            function getLocation(val) {
                console.log(val.detail);
                // 记录经纬度
                markers[0].longitude = val.detail.longitude
                markers[0].latitude = val.detail.latitude
                //
                getAddress()
            }

            function getAddress() {
              uni.request({
                url: 'https://apis.map.qq.com/ws/geocoder/v1/',
                method: 'GET',
                data: {
                  location: `${markers[0].latitude},${markers[0].longitude}`,
                  key: 'YNLBZ-RHT6Q-ZJG5A-BGGXC-2BLS3-YCFGS',
                  get_poi: 1
                },
                success: (res) => {
                  if (res.data.status === 0) {
                    address.value = res.data.result.address; // ✅ 直接赋值给 ref 的 .value
                  } else {
                    console.warn('腾讯地图返回错误:', res.data.message);
                    uni.showToast({ title: '获取地址失败', icon: 'none' });
                  }
                },
                fail: (err) => {
                  console.error('请求失败:', err);
                  uni.showToast({ title: '网络错误', icon: 'none' });
                }
              });
            }

            function confirm() {
              if (!address.value) {
                uni.showToast({ title: '请选择位置', icon: 'none' });
                return;
              }
            
              // 获取当前页面实例
              const pages = getCurrentPages();
              const currentPage = pages[pages.length - 1];
              
              // 通过 eventChannel 向上一页发送数据
              const eventChannel = currentPage.getOpenerEventChannel();
			  console.log('eventChannel:',eventChannel);
              if (eventChannel) {
				  console.log('address.value:',address.value);
                  eventChannel.emit('change', address.value);
              }
            
              uni.navigateBack();
            }
            return {
                longitude, latitude, polyline, markers, address, getLocation, getAddress, confirm
            }
        }
    }
</script>

<style scoped>
.map{
    width: 96%;
    margin-left: 2%;
    height: 1000rpx;
}
.info-box{
    width: 94%;
    font-size: 30rpx;
    border: 1px solid #f0f0f0;
    margin-left: 3%;
    margin-top: 20rpx;
    border-radius: 5rpx;
    text-align: center;
}
.confirm-view{
    background-color: red;
    font-size: 30rpx;
    color: white;
    font-weight: bold;
    height: 60rpx;
    border-radius: 30rpx;
    width: 60%;
    margin-left: 20%;
    text-align: center;
    position: absolute;
    bottom: 2rpx;
}
.confirm-view-text{
    position: relative;
    top: 10rpx;
}
</style>